<!--
  产品分类管理页面组件
  负责展示产品分类列表、搜索分类、查看分类详情、编辑分类信息等功能
-->
<template>
  <!-- 搜索区域 -->
  <div class="search-container">
    <!-- 搜索表单卡片 -->
    <el-card shadow="never" class="search-card">
      <!-- 表单容器 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <!-- 分类名称搜索项 -->
        <el-form-item label="分类名称">
          <el-input
            v-model="searchForm.category_name"
            placeholder="请输入分类名称"
            clearable
            @keyup.enter="handleSearch"
            style="width: 200px;"
          />
        </el-form-item>

        <!-- 操作按钮组 -->
        <el-form-item>
          <!-- 搜索按钮 -->
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <!-- 重置按钮 -->
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

  <!-- 树形区域 -->
  <el-card class="table-card">
    <!-- 表格头部 -->
    <template #header>
      <div class="table-header">
        <span>产品分类列表</span>
        <!-- 新增分类按钮 -->
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>
          新增分类
        </el-button>
      </div>
    </template>

    <!-- 产品分类树形控件 -->
    <el-tree
      :data="categoryTreeData"
      :props="treeProps"
      :expand-on-click-node="false"
      node-key="category_id"
      default-expand-all
      v-loading="treeLoading"
    >
      <template #default="{ node, data }">
        <div class="tree-node">
          <span class="tree-node-label">{{ node.label }}</span>
          <span class="tree-node-description" v-if="data.description">
            ({{ data.description }})
          </span>
          <div class="tree-node-actions">
            <!-- 查看按钮 -->
            <el-button type="info" size="small" @click="handleView(data)">
              查看
            </el-button>
            <!-- 编辑按钮 -->
            <el-button type="primary" size="small" @click="handleEdit(data)">
              编辑
            </el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" size="small" @click="handleDelete(data)">
              删除
            </el-button>
          </div>
        </div>
      </template>
    </el-tree>
  </el-card>

  <!-- 分类详情对话框 -->
  <el-dialog
    v-model="detailDialogVisible"
    title="分类详情"
    width="700px"
    :close-on-click-modal="false"
  >
    <!-- 详情内容区域（带加载状态） -->
    <div v-loading="detailLoading" class="detail-container">
      <!-- 分类详情描述列表 -->
      <el-descriptions :column="1" border>
        <!-- 分类编号项 -->
        <el-descriptions-item label="分类编号">
          {{ categoryDetail.category_id || '-' }}
        </el-descriptions-item>
        <!-- 分类名称项 -->
        <el-descriptions-item label="分类名称">
          {{ categoryDetail.category_name || '-' }}
        </el-descriptions-item>
        <!-- 分类描述项 -->
        <el-descriptions-item label="分类描述">
          {{ categoryDetail.description || '-' }}
        </el-descriptions-item>
        <!-- 创建时间项 -->
        <el-descriptions-item label="创建时间">
          {{ categoryDetail.created_at || '-' }}
        </el-descriptions-item>
        <!-- 更新时间项 -->
        <el-descriptions-item label="更新时间">
          {{ categoryDetail.updated_at || '-' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 对话框底部操作区域 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleEditFromDetail">
          编辑分类
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑分类对话框 -->
  <el-dialog
    v-model="editDialogVisible"
    :title="editingCategory.category_id ? '编辑分类' : '新增分类'"
    width="500px"
    :close-on-click-modal="false"
    @close="handleEditClose"
  >
    <!-- 编辑表单（带加载状态） -->
    <el-form
      ref="editFormRef"
      :model="editingCategory"
      :rules="editRules"
      label-width="80px"
      v-loading="editLoading"
    >
      <!-- 分类名称表单项 -->
      <el-form-item label="分类名称" prop="category_name">
        <el-input
          v-model="editingCategory.category_name"
          placeholder="请输入分类名称"
        />
      </el-form-item>

      <!-- 父级分类表单项 -->
      <el-form-item label="父级分类" prop="parent_id">
        <!-- 使用树形选择器替换原来的普通选择器 -->
        <el-tree-select
          v-model="editingCategory.parent_id"
          :data="parentCategoryTreeOptions"
          placeholder="请选择父级分类"
          style="width: 100%"
          node-key="category_id"
          :props="treeProps"
          check-strictly
          clearable
          filterable
        />
      </el-form-item>

      <!-- 分类描述表单项 -->
      <el-form-item label="分类描述" prop="description">
        <el-input
          v-model="editingCategory.description"
          placeholder="请输入分类描述"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
    </el-form>

    <!-- 对话框底部操作区域 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="submitEdit"
          :loading="submitLoading"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
/**
 * 产品分类管理页面的脚本部分
 * 负责处理产品分类数据的增删改查、分页、搜索等功能
 */

// 从Vue中导入所需的响应式API
import { ref, onMounted, reactive, computed } from 'vue'

// 从Element Plus中导入消息和确认框组件
import { ElMessage, ElMessageBox } from 'element-plus'

// 导入所需的图标组件
import { Search, Refresh, Plus } from '@element-plus/icons-vue'

// 导入产品分类相关的API函数
import {
  getProductCategoryList,
  deleteProductCategory,
  getProductCategoryById,
  updateProductCategory,
  createProductCategory
} from '../api/ProductCategories'

// 响应式数据定义
// 产品分类列表数据
const categoryList = ref([])
const categoryTreeData = ref([])  // 树形数据
const treeLoading = ref(false)    // 树形加载状态

// 对话框相关状态
const detailDialogVisible = ref(false)  // 分类详情对话框显示状态
const detailLoading = ref(false)        // 分类详情加载状态
const categoryDetail = ref({})          // 分类详情数据

// 编辑对话框相关状态
const editDialogVisible = ref(false)    // 编辑对话框显示状态
const editLoading = ref(false)          // 编辑加载状态
const submitLoading = ref(false)        // 提交按钮加载状态
const editFormRef = ref(null)           // 编辑表单引用

// 搜索表单数据（使用reactive创建响应式对象）
const searchForm = reactive({
  category_name: ''      // 分类名称搜索条件
})

// 编辑的产品分类数据（使用reactive创建响应式对象）
const editingCategory = reactive({
  category_id: '',      // 分类ID
  category_name: '',    // 分类名称
  parent_id: null,         // 父级分类ID，默认为null表示顶级分类
  description: ''       // 分类描述
})

// 父级分类选项（树形结构）
const parentCategoryTreeOptions = computed(() => {
  // 为顶级分类添加一个虚拟节点，表示"无父级"
  const treeDataWithRoot = [
    {
      category_id: null,  // 修改为null，与数据库中顶级分类的parent_id保持一致
      category_name: '顶级分类',
      children: []
    },
    ...JSON.parse(JSON.stringify(categoryTreeData.value))
  ];

  // 过滤掉当前正在编辑的分类，避免自己作为自己的父级
  const filterCurrentCategory = (categories) => {
    return categories.filter(item => {
      // 如果是新增分类，不过滤任何分类
      if (!editingCategory.category_id) {
        // 但需要过滤掉非顶级分类的节点，因为它们不能作为顶级分类的父级
        if (item.category_id === null && editingCategory.parent_id !== null) {
          return false;
        }
        return true;
      }
      // 如果是编辑分类，过滤掉当前分类及其子分类
      if (item.category_id === editingCategory.category_id) {
        return false;
      }
      // 递归过滤子分类
      if (item.children && item.children.length > 0) {
        item.children = filterCurrentCategory(item.children);
      }
      return true;
    });
  };

  // 返回过滤后的分类树
  return filterCurrentCategory(treeDataWithRoot);
});

// 树形控件属性配置
const treeProps = {
  label: 'category_name',
  children: 'children',
  value: 'category_id'
}

// 编辑表单验证规则
const editRules = {
  category_name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' }
  ]
}

/**
 * 获取产品分类列表数据
 * 支持搜索功能
 */
const getCategoryListData = async () => {
  // 构建请求参数对象，包含搜索条件
  const params = {
    category_name: searchForm.category_name
  }

  try {
    treeLoading.value = true
    // 调用API获取产品分类列表数据
    const res = await getProductCategoryList(params)

    // 处理响应数据，兼容不同的API响应结构
    let dataList = []

    // 检查响应数据结构
    if (res.data) {
      // 如果有data字段，进一步检查结构
      if (Array.isArray(res.data)) {
        // data直接是数组
        dataList = res.data
      } else if (res.data.data || res.data.categories || res.data.list) {
        // data是一个对象，包含嵌套的数据数组
        dataList = res.data.data || res.data.categories || res.data.list || []
      } else {
        // data是其他结构，尝试直接使用
        dataList = Array.isArray(res.data) ? res.data : []
      }
    } else {
      // 没有data字段，直接使用响应体
      dataList = Array.isArray(res) ? res : (Array.isArray(res.list) ? res.list : [])
    }

    // 更新产品分类列表数据
    categoryList.value = dataList

    // 直接使用后端返回的树形结构数据
    categoryTreeData.value = dataList
  } catch (error) {
    console.error('获取产品分类列表失败:', error)
    ElMessage.error('获取产品分类列表失败，请稍后重试！')
  } finally {
    treeLoading.value = false
  }
}

/**
 * 搜索功能处理函数
 */
const handleSearch = () => {
  getCategoryListData()
}

/**
 * 重置搜索条件处理函数
 */
const handleReset = () => {
  // 清空搜索表单
  Object.assign(searchForm, {
    category_name: ''
  })
  getCategoryListData()
}

/**
 * 查看分类详情处理函数
 * @param {Object} row - 分类数据行
 */
const handleView = async (row) => {
  try {
    detailDialogVisible.value = true
    detailLoading.value = true

    // 调用API获取分类详情
    const response = await getProductCategoryById(row.category_id)
    categoryDetail.value = response.category || row

  } catch (error) {
    console.error('获取分类详情失败:', error)
    ElMessage.error('获取分类详情失败，请稍后重试！')

    // 如果API调用失败，使用列表中的数据作为后备方案
    categoryDetail.value = row
  } finally {
    detailLoading.value = false
  }
}

/**
 * 从详情对话框跳转到编辑处理函数
 */
const handleEditFromDetail = () => {
  detailDialogVisible.value = false
  handleEdit(categoryDetail.value)
}

/**
 * 编辑分类处理函数
 * @param {Object} row - 分类数据行
 */
const handleEdit = (row) => {
  // 初始化编辑表单数据（直接使用数据中的值，不再转换）
  Object.assign(editingCategory, {
    category_id: row.category_id || '',
    category_name: row.category_name || '',
    parent_id: row.parent_id !== null ? row.parent_id : null,  // 如果父级ID为null（旧数据），则设置为null
    description: row.description || ''
  })

  // 显示编辑对话框
  editDialogVisible.value = true
}

/**
 * 新增分类处理函数
 */
const handleAdd = () => {
  // 清空编辑表单数据
  Object.assign(editingCategory, {
    category_id: '',
    category_name: '',
    parent_id: null,         // 默认为null表示顶级分类
    description: ''
  })

  // 显示编辑对话框
  editDialogVisible.value = true
}

/**
 * 关闭编辑对话框时的清理工作
 */
const handleEditClose = () => {
  // 重置表单验证状态
  if (editFormRef.value) {
    editFormRef.value.resetFields()
  }

  // 清空编辑数据
  Object.assign(editingCategory, {
    category_id: '',
    category_name: '',
    parent_id: null,         // 默认为null表示顶级分类
    description: ''
  })
}

/**
 * 提交编辑表单处理函数
 */
const submitEdit = async () => {
  // 表单验证
  if (!editFormRef.value) return

  try {
    await editFormRef.value.validate()

    // 设置提交按钮加载状态
    submitLoading.value = true

    // 准备提交数据（直接使用前端的值，不再转换）
    const submitData = {
      category_name: editingCategory.category_name,
      parent_id: editingCategory.parent_id === 0 ? null : editingCategory.parent_id,  // 将0转换为null
      description: editingCategory.description
    }

    if (editingCategory.category_id) {
      // 更新分类
      await updateProductCategory(editingCategory.category_id, submitData)
    } else {
      // 创建分类
      await createProductCategory(submitData)
    }

    // 提示成功
    ElMessage.success(`${editingCategory.category_id ? '更新' : '创建'}分类成功！`)

    // 关闭对话框
    editDialogVisible.value = false

    // 重新加载产品分类列表
    getCategoryListData()
  } catch (error) {
    console.error(`${editingCategory.category_id ? '更新' : '创建'}分类失败:`, error)
    ElMessage.error(`${editingCategory.category_id ? '更新' : '创建'}分类失败，请稍后重试！`)
  } finally {
    // 取消提交按钮加载状态
    submitLoading.value = false
  }
}

/**
 * 删除分类处理函数
 * @param {Object} row - 分类数据行
 */
const handleDelete = async (row) => {
  try {
    // 使用ElMessageBox进行二次确认
    await ElMessageBox.confirm(
      `确定要删除分类 "${row.category_name}" 吗？此操作不可恢复！`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: false
      }
    )
    // 调用删除API
    await deleteProductCategory(row.category_id)

    // 删除成功提示
    ElMessage.success('删除分类成功！')

    // 重新加载列表数据
    getCategoryListData()
  } catch (error) {
    // 用户取消删除
    if (error === 'cancel') {
      return
    }
    // 删除失败处理
    ElMessage.error('删除分类失败，请稍后重试！')
  }
}

// 组件挂载时获取产品分类列表数据
onMounted(() => {
  getCategoryListData()
})
</script>

<style scoped>
/**
 * 产品分类管理页面样式部分
 * 使用scoped属性确保样式只作用于当前组件
 */

/* 搜索区域样式 */
.search-container {
  margin-bottom: 20px;
}

/* 搜索卡片样式 */
.search-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 搜索表单样式 */
.search-form {
  margin-bottom: 0;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

/* 表格卡片样式 */
.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 表格头部样式 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 详情容器样式 */
.detail-container {
  min-height: 200px;
}

/* 对话框底部样式 */
.dialog-footer {
  text-align: right;
}

/* 树节点样式 */
.tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  padding: 10px 0;
}

.tree-node-label {
  font-weight: bold;
  margin-right: 10px;
}

.tree-node-description {
  color: #999;
  font-size: 12px;
  flex: 1;
}

.tree-node-actions {
  display: flex;
  gap: 5px;
}
</style>
